<template>
  <view class="bgf mb-12 px-15 fz-14 br-12" @click.stop="toDetails">
    <view class="disFlxJS linh-40 borderBottom">
      <view>{{ getOrderTypeText }}</view>
      <view class="color1" v-if="item.orderState === OrderStateEnum.NOPAYMENT">待支付</view>
      <view class="color1" v-if="item.orderState === OrderStateEnum.UNDERWAY">进行中</view>
      <view class="color2" v-if="item.orderState === OrderStateEnum.DONE">已完成</view>
      <template v-if="item.orderState === OrderStateEnum.CLOSED">
        <view v-if="item.payState === OrderPayStateEnum.HAVEPAID" class="color3">
          <text v-if="item.refundStatus === OrderRefundStatusEnum.REFUNDED">已退款</text>
          <text v-else-if="item.refundStatus === OrderRefundStatusEnum.UNDERREFUND">退款中</text>
          <text v-else-if="item.refundStatus === OrderRefundStatusEnum.PARTREFUNDED">部分退款</text>
        </view>
        <view v-else class="color3">已取消</view>
      </template>
    </view>
    <view class="disFlx py-15">
      <TImage width="128rpx" height="160rpx" :src="item.productPicture" />
      <view class="disFlx rightBox pl-14">
        <view>
          <text>
            {{ item.productName }}
          </text>
          <text v-if="getShowProductCount" class="ml-8">x{{ item.productCount }}</text>
        </view>
        <view v-if="item.orderType !== OrderTypeEnum.ACTIVITY_PAY" class="fz-16 fw-7 pliceColor">
          <text>{{ formatMoney({ money: item.payMoney, showFreeText: getShowFreeText }) }}</text>
        </view>
        <view v-else-if="item.payMoney > 0" class="fz-16 fw-7 pliceColor">
          <text>{{ formatMoney({ money: item.payMoney, showFreeText: getShowFreeText }) }}</text>
        </view>
        <view class="timeColor">{{ item.createTime }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { type MyOrderListReslut } from '@/api/order/types';
  import { computed, type PropType, ref } from 'vue';
  import { formatMoney } from '@/utils/number';
  import TImage from '@/components/TImage/index.vue';
  import {
    OrderTypeEnum,
    OrderStateEnum,
    OrderPayStateEnum,
    OrderRefundStatusEnum,
  } from '@/enums/orderEnum';
  import { type PagesType } from '@/router/types/pages';
  import { navigateTo } from '@/router';

  const props = defineProps({
    item: {
      type: Object as PropType<MyOrderListReslut>,
      required: true,
    },
  });

  const emit = defineEmits(['refresh']);

  const detailsPage = ref<PagesType>();

  const getOrderTypeText = computed(() => {
    switch (props.item.orderType) {
      case OrderTypeEnum.MEMBER_FEES:
        detailsPage.value = 'membershipOrder';
        return '会费';
      case OrderTypeEnum.SECRETARIAT:
        detailsPage.value = 'unlockStep';
        return '秘书处联络';
      case OrderTypeEnum.UNLOCK_BUSINESS_CARD:
        detailsPage.value = 'unlockOrder';
        return '解锁联系方式';
      case OrderTypeEnum.ACTIVITY_PAY:
        detailsPage.value = 'activityRegisterOrder';
        return '活动报名';
      case OrderTypeEnum.UNLOCK_BUSINESS_OPPORTUNITIES:
        detailsPage.value = void 0;
        return '解锁供需';
      default:
        return '';
    }
  });

  const getShowProductCount = computed(() => {
    return props.item.productCount && props.item.orderType === OrderTypeEnum.ACTIVITY_PAY;
  });

  /** 显示会员免费字样 */
  const getShowFreeText = computed(() => {
    const { item } = props;
    switch (item.orderType) {
      case OrderTypeEnum.MEMBER_FEES:
      case OrderTypeEnum.SECRETARIAT:
      case OrderTypeEnum.UNLOCK_BUSINESS_CARD:
      case OrderTypeEnum.UNLOCK_BUSINESS_OPPORTUNITIES:
        return true;
      case OrderTypeEnum.ACTIVITY_PAY:
        detailsPage.value = 'activityRegisterOrder';
        return false;
      default:
        return false;
    }
  });

  /** 跳转详情 */
  function toDetails() {
    if (detailsPage.value) {
      navigateTo({
        name: detailsPage.value as any,
        options: {
          orderCode: props.item.orderCode,
          callback: () => emit('refresh'),
        },
      });
    }
  }
</script>

<style scoped lang="scss">
  $color-primary: #2878ff;
  $color-error: #ff3434;
  $color-warning: #ffa944;

  .color1 {
    color: $color-primary;
  }

  .color2 {
    color: $color-warning;
  }

  .color3 {
    color: $color-error;
  }

  .rightBox {
    flex-direction: column;
    justify-content: space-around;
  }
  .pliceColor {
    color: #b47026;
  }

  .timeColor {
    color: #aaabab;
  }
</style>
